<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="50%"
    title="查看"
    :dialog-style="{ top: '20px' }"
    :footer="null"
  >
    <div v-if="visible" v-permission="['promotions:limitprice:query']" v-loading="loading">
      <a-divider>基本信息</a-divider>
      <a-descriptions :column="4" :label-style="{ width: '120px' }" bordered>
        <a-descriptions-item label="活动名称" :span="4">
          {{ formData.name }}
        </a-descriptions-item>
        <a-descriptions-item label="促销活动时间" :span="4">
          <cycle-form
            ref="cycleForm"
            :read-only="true"
            v-model:begin-date="formData.beginDate"
            v-model:end-date="formData.endDate"
            v-model:cycle-flag="formData.cycleFlag"
            v-model:cycle-type="formData.cycleType"
            v-model:cycle-time-group="formData.cycleTimeGroup"
            v-model:cycle-time-rule="formData.cycleTimeRule"
          />
        </a-descriptions-item>
        <a-descriptions-item label="适用人群" :span="4">
          <a-space>
            <span>
              {{ $enums.MEMBER_LEVEL_TYPE.getDesc(formData.allMemberLevel) }}
            </span>
            <span v-if="formData.allMemberLevel === 3">
              <member-level-selector
                v-model:value="formData.memberLevelId"
                :multiple="true"
                :show-sum="true"
                :read-only="true"
              />
            </span>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="购买限制" :span="4">
          <a-space>
            <span>
              {{
                formData.allBuyLimit
                  ? `每人每单每个商品限购 ${formData.cycleBuyLimit} 件`
                  : '不限制'
              }}
            </span>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="共享优惠" :span="4">
          <a-space>
            <a-checkbox v-model:checked="formData.useCoupon" disabled="">优惠券</a-checkbox>
            <a-checkbox v-model:checked="formData.useFullreduction" disabled>满减</a-checkbox>
            <a-checkbox v-model:checked="formData.useFulldiscount" disabled>满折</a-checkbox>
            <a-checkbox v-model:checked="formData.useFullgiftactivity" disabled>满赠</a-checkbox>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="活动状态" :span="4">
          <marketing-state-tag :marketing-state="formData.marketingState" />
        </a-descriptions-item>
      </a-descriptions>
      <a-divider>参与商品及特价设置</a-divider>
      <a-descriptions :column="4" :label-style="{ width: '120px' }" bordered>
        <a-descriptions-item label="参与门店" :span="4">
          <a-space>
            <span>{{ formData.allShop ? '所有门店' : '指定门店:' }}</span>
            <span v-if="!formData.allShop">
              <shop-selector
                v-model:value="formData.shopId"
                :multiple="true"
                :show-sum="true"
                :read-only="true"
              />
            </span>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="参与商品" :span="4">
          <a-space>
            <span>{{ formData.allProduct ? '所有商品' : '指定商品' }}</span>
          </a-space>
          <a-row v-if="formData.allProduct">
            <a-col :span="24">
              {{ `统一特价:￥ ${(formData.promPrice.price || 0).toFixed(2)}` }}
            </a-col>
          </a-row>
          <a-row v-else>
            <a-col :span="24">
              <product-table-edit
                :visible="visible"
                :read-only="true"
                :extend-column="[
                  {
                    field: 'promPrice',
                    title: '促销价格',
                    minWidth: 120,
                    slots: { default: 'promPrice_default' },
                  },
                ]"
                :product-id="formData.productId"
                :product-value="formData.promPrice"
              >
                <template #promPrice_default="{ row, readOnly }">
                  <a-form-item
                    v-if="!readOnly"
                    label=" "
                    :colon="false"
                    :name="['promPrice', row?.id, 'price']"
                    :rules="[{ required: true, message: '' }]"
                  >
                    <div style="padding-top: 3px">
                      <a-input-number
                        addon-after="￥"
                        precision="2"
                        min="0.00"
                        style="width: 100px"
                        v-model:value="formData.promPrice[row.id].price"
                      />
                    </div>
                  </a-form-item>
                  <span v-else>
                    {{ `￥ ${(row.promPrice?.price || 0).toFixed(2)}` }}
                  </span>
                </template>
              </product-table-edit>
            </a-col>
          </a-row>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </a-modal>
</template>
<script>
  import { defineComponent } from 'vue';
  import * as api from '@/api/promotions/limitprice';
  import CycleForm from '@/views/promotions/cycleForm.vue';
  import MemberLevelSelector from '@/components/Selector/src/MemberLevelSelector.vue';
  import ShopSelector from '@/components/Selector/src/ShopSelector.vue';
  import MarketingStateTag from '@/components/Tag/src/MarketingStateTag.vue';
  import ProductTableEdit from '@/views/promotions/productTableEdit.vue';

  export default defineComponent({
    // 使用组件
    components: {
      ProductTableEdit,
      MarketingStateTag,
      ShopSelector,
      MemberLevelSelector,
      CycleForm,
    },
    props: {
      id: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        // 是否可见
        visible: false,
        // 是否显示加载框
        loading: false,
        // 表单数据
        formData: {},
      };
    },
    created() {
      this.initFormData();
    },
    methods: {
      // 打开对话框 由父页面触发
      openDialog() {
        this.visible = true;

        this.$nextTick(() => this.open());
      },
      // 关闭对话框
      closeDialog() {
        this.visible = false;
        this.$emit('close');
      },
      // 初始化表单数据
      initFormData() {
        this.formData = {
          name: '',
          beginDate: '',
          endDate: '',
          cycleFlag: false,
          cycleType: 1,
          cycleTimeGroup: [
            {
              beginTime: '',
              endTime: '',
            },
          ],
          cycleTimeRule: [],
          promPrice: {},
          allMemberLevel: 1,
          memberLevelId: '',
          allBuyLimit: false,
          cycleBuyLimit: 0,
          allProduct: true,
          productId: [],
          useCoupon: false,
          useFullreduction: false,
          useFulldiscount: false,
          useFullgiftactivity: false,
          allShop: true,
          shopId: [],
        };
      },
      // 页面显示时触发
      open() {
        // 初始化数据
        this.initFormData();

        // 查询数据
        this.loadFormData();
      },
      // 查询数据
      loadFormData() {
        this.loading = true;
        api
          .get(this.id)
          .then((data) => {
            this.formData = {
              ...data,
              cycleTimeGroup: JSON.parse(data.cycleTimeGroup),
              cycleTimeRule: JSON.parse(data.cycleTimeRule),
              memberLevelId: JSON.parse(data.memberLevelId),
              productId: JSON.parse(data.productId),
              shopId: JSON.parse(data.shopId),
              promPrice: JSON.parse(data.promPrice),
            };
          })
          .finally(() => {
            this.loading = false;
          });
      },
    },
  });
</script>
